<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最新活动</title>
    <link rel="stylesheet" href="style/reset.css">
    <link rel="stylesheet" href="style/index.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit|ie-stand |ie-comp">
    <!-- 指定以最新的IE版本模式来显示网页 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对360浏览器的内核调用,强制调用极速模式 -->
    <meta name="renderer" content="webkit" />
    <link rel="stylesheet" href="swiper/swiper.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="swiper/swiper.min.js"></script>
     <!-- 城市选择 -->
	<script src="js/distpicker-new.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
    	.title .peo-num{
    		color: #f00;
    	}
    	.enroll-info{
    		width: 100%;
    		border: 2px solid #ccc;
    		padding-top: 50px;
    		padding-bottom: 50px;
    	}
    	.enroll-info ul{
    		display: flex;
    		justify-content: flex-start;
    		flex-wrap: wrap;
    	}
    	.form-list{
    		display: flex;
    		justify-content: flex-start;
    		margin-right: 20px;
    		margin-bottom: 24px;
    	}
    	.form-list .form-tit{
    		width: 200px;
    		text-align: right;
    		font-size: 14px;
    		line-height: 40px;
    		color: #333;
    	}
    	.form-list .form-tit i{
    		color: #f00;
    		padding: 0 7px;
    		font-style: normal;
    	}
    	.form-list .form-con{
    		margin-left: 24px;
    	}
    	.form-list .form-con .input_text{
    		display: block;
    		width: 210px;
    		border: 1px solid rgb(169,169,169);
    		font-size: 14px;
    		line-height: 38px;
    		color: #333;
    		padding-left: 10px;
    		height: 40px;
    	}
    	.form-list.checkbox .form-con{
    		display: flex;
    		justify-content: flex-start;
    	}
    	.form-list.checkbox .checkbox-con{
    		display: flex;
    		justify-content: flex-start;
    		align-items: center;
    		font-size: 12px;
    		line-height: 40px;
    		color: #333;
    		margin-right: 30px;
    		cursor: pointer;
    	}
    	.form-list.checkbox .checkbox-con input{
    		cursor: pointer;
    		margin-right: 5px;
    	}
    	.form-list.checkbox .checkbox-con label{
    		cursor: pointer;
    	}
    	.form-list.address{
    		width: 100%;
    	}
    	.form-list .address-con .position{
    		width: 110px;
    		font-size: 14px;
    		line-height: 38px;
    		color: #333;
    		height: 40px;
    		margin-right: 20px;
    		text-align: center;
    	}
    	.form-list.text-area{
    		width: 100%;
    	}
    	.form-list.text-area textarea{
    		width: 680px;
    		border: 1px solid rgb(169,169,169);
    		box-sizing: border-box;
    		padding-left: 10px;
    		padding-top: 10px;
    	}
    	.enroll-info .submit{
    		width: 200px;
    		font-size: 14px;
    		line-height: 40px;
    		color: #fff;
    		text-align: center;
    		background: #ff4d4d;
    		border-radius: 5px;
    		border: 0;
    		margin-left: 224px;
    		cursor: pointer;
    	}
    </style>
</head>
<body>

    <!-- 公共顶部 S -->
    <div class="row header-top">
        <div class="container">
            <div class="header-top-l fl">您好，欢迎来到房屋装修监理网!</div>
            <div class="header-top-r fr">
                <div class="htrdl"><a href="mmlogin.html">登录</a></div>
                <div class="htrdl"><a href="register.html">注册</a></div>
                <!-- 登陆后出现用户名 和 退出 -->
                <!-- <div class="htrdl"><a>Andy233</a></div>
                <div class="htrdl"><a href="">退出</a></div> -->
                <span class="htrb"></span>
                <div class="htr"><a href="index-zxhd.html">最新活动</a></div>
                <span class="htrb"></span>
                <div class="htr"><a href="index-gsjieshao.html">公司介绍</a></div>
                <span class="htrb"></span>
                <div class="htr"><a href="index-ZXyuyue.html">免费预约</a></div>
                <span class="htrb"></span>
                <div class="htr mess"><a href="PersonalCenter/MyXTxiaoxi.html">消息<span>20</span></a></div>
                <span class="htrb"></span>
                <div class="htr"><a href="PersonalCenter/Myxiangmu.html">个人中心</a></div>
                <span class="htrb"></span>
            </div>
        </div>
    </div>
    <div class="row header-logo">
        <div class="container  header-conter">
            <div class="hclogo fl">
                <a href="index.html"><img src="image/logo.png"></a>
            </div>
            <div class="hcsearch">
                <div class="hcsearl fl">
                    <select>
                        <option>监理现场</option>
                        <option>监理案例</option>
                        <option>装修攻略</option>
                        <option>维权视频</option>
                    </select>
                </div>
                <div class="hcsearc fl">
                    <input type="text">
                </div>
                <div class="hcsearr fr">
                    搜索
                </div>
            </div>
            <div class="hctex fr">
                <img src="image/tel.png" style="margin-right: 40px;">
                <img src="image/wx.png">
            </div>
        </div>
    </div>
    <div class="row header-bottom">
        <div class="container">
            <a class="hbmain fl selected" href="index.html">首页</a>
            <a class="hbnav fl" href="index-jlfw.html">监理服务</a>
            <a class="hbnav fl" href="index-jlxc.html">监理现场</a>
            <a class="hbnav fl" href="index-jlal.html">监理案例</a>
            <a class="hbnav fl" href="index-zxgl.html">装修攻略</a>
            <a class="hbnav fl" href="index-wqsp.html">维权视频</a>
            <a class="hbnav fl" href="index-zxgs.html">装修公司</a>
        </div>
    </div>
    <!--公共顶部 E -->

    <div class="row">
        <div class="container">
            <div class="title" style="color: #991F1F">最新活动详情标题</div>
            <p></p>
            
            <div class="enroll">
            	<div class="title">请填写以下信息报名 (已有<span class="peo-num">289</span>人报名成功)</div>
            	<div class="enroll-info">
            		<ul>
            			<!--普通输入框-->
            			<!--<li class="form-list normal-input">
            				<div class="form-tit"><span><i>*</i>您的姓名 :</span></div>           				
            				<div class="form-con"><input class="input_text" type="text" placeholder="请输入您的姓名" required/></div>
            			</li>
            			<li class="form-list normal-input">
            				<div class="form-tit"><span><i>*</i>您的电话 :</span></div>           				
            				<div class="form-con"><input class="input_text" type="text" placeholder="请输入您的电话" required/></div>
            			</li>-->
            			<!--下拉选择框 -->          			
            			<!--<li class="form-list select">
            				<div class="form-tit"><span><i>*</i>选择服务项目 :</span></div>           				
            				<div class="form-con">
            					<select name="case" class="input_text">
									<option value="0">选择服务项目</option>
									<option value="1">全程监理</option>
									<option value="2">15项重点监理项目</option>
									<option value="3">单项全程监理</option>
									<option value="4">预算计算审核</option>
								</select>
            				</div>
            			</li>-->
            			<!--复选框-->
            			<!--<li class="form-list checkbox">
            				<div class="form-tit"><span><i>*</i>增值服务 :</span></div>           				
            				<div class="form-con">
            					<div class="checkbox-con">
									<input type="checkbox" name="check-01" id="check-01-01" value="" checked="checked"/>
									<label for="check-01-01">量房服务</label>
								</div>
								<div class="checkbox-con">
									<input type="checkbox" name="check-01" id="check-01-02" value="" />
									<label for="check-01-02">验房服务</label>
								</div>
            				</div>
            			</li>-->
            			<!--地址选择组件-->
            			<!--<li class="form-list address">
            				<div class="form-tit"><span><i>*</i>填写地址 :</span></div>           				
            				<div class="form-con">
            					<div class="address-con">
									<div data-toggle="distpicker" id="distTarget">
										<select class="position province"  data-province="选择省"></select>
										<select class="position city"  data-city="选择市"></select>
										<select class="position area"  data-district="选择区"></select>
									</div>
								</div>
            				</div>
            			</li>-->
						<!--多行输入框-->
            			<!--<li class="form-list text-area">
            				<div class="form-tit"><span><i>*</i>您的留言 :</span></div>           				
            				<div class="form-con">
            					<textarea placeholder="" class="textarea" rows="6"></textarea>	
            				</div>
            			</li>-->
            		</ul>           		
            		<button class="submit">立即报名</button>
            	</div>
            </div>
            
            <div class="title">历史活动</div>
            <div class="zxhdlist"><a href="index-zxhd.html">活活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动动</a></div>
            <div class="zxhdlist"><a href="index-zxhd.html">活活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动动</a></div>
            <div class="zxhdlist"><a href="index-zxhd.html">活活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动动</a></div>
            <div class="zxhdlist"><a href="index-zxhd.html">活活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动动</a></div>
        </div>
    </div>

    <!-- 主页底部banner S-->
    <a class="indexfootbn" href="index-ZXyuyue.html"></a>
    <!-- 主页底部banner E-->

    <!--公共底部 S-->
    <div class="row foot-top">
        <div class="container">
            <div class="ftpl fl">
                <div class="ftpltitle">服务指南</div>
                <div class="ftplcon"><a href="index-jzjl02.html">全程监理</a></div>
                <div class="ftplcon"><a href="index-jzjl01.html">全托监理</a></div>
                <div class="ftplcon"><a href="index-gzjl.html">工装监理</a></div>
                <div class="ftplcon"><a href="index-yffw.html">验房服务</a></div>
            </div>
            <div class="ftpl fl">
                <div class="ftpltitle">旭尧监理</div>
                <div class="ftplcon"><a href="index-jlxc.html">监理现场</a></div>
                <div class="ftplcon"><a href="index-jlal.html">监理案例</a></div>
                <div class="ftplcon"><a href="index-zxgl.html">装修攻略</a></div>
                <div class="ftplcon"><a href="index-wqsp.html">维权视频</a></div>
            </div>
            <div class="ftpl fl">
                <div class="ftpltitle">关于旭尧</div>
                <div class="ftplcon"><a href="index-gsjieshao.html">公司介绍</a></div>
                <div class="ftplcon"><a href="index-ZXyuyue.html">免费预约</a></div>
            </div>
            <div class="ftpc fl">
                <div class="ftpltitle">联系我们</div>
                <div class="ftpltel"><img src="image/icon-tell.png">0571-88322527 13656667535</div>
                <div class="ftplcon"><img src="image/icon-email.png">fwzxjl@163.com</div>
                <div class="ftplcon"><img src="image/icon-qq.png">QQ:354426019</div>
                <div class="ftplcon"><img src="image/icon-dw.png">杭州市拱墅区广业街长青文化创意园2号楼410室</div>
            </div>
            <div class="ftpr fl">
                <div class="ftpltitle">关注我们</div>
                <a href="http://weibo.com/fwzxjl" title="关注腾讯微博" ><img src="image/xlwb.png"></a>
                <a href="http://t.qq.com/lov354426019" title="关注腾讯微博"><img src="image/qqwb.png"></a>
                <a href="http://wpa.qq.com/msgrd?v=3&uin=354426019&site=qq&menu=yes"  title="联系QQ客服"><img src="image/qqqw.png"></a>
                <div class="ftprrwm">
                    <img src="image/wx2.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="row foot-bottom">
        <div class="container">
            <span>杭州旭尧监理 版权所有 2012-2016 浙ICP备12033773-2号 公安备案号 </span> &nbsp;<img src="image/icon-police.png">&nbsp;
            <span>声明:本站所有装修帖来自于『杭州房屋装修监理网』现场监督过程|不得转载用于商业场所！</span><br>
            <a>友情链接</a>

            <a href="http://www.hzxyjl.com/" title="杭州旭尧监理杭州旭尧建筑工程监理有限公司">杭州旭尧监理</a>
            <a href="http://www.1linli.com" title="生活小妙招生活小妙招，生活小窍门，生活小常识">生活小妙招</a>
            <a href="http://hz.to8to.com/company/" title="杭州装修公司杭州土巴兔家居装修网装修公司排名">杭州装修公司</a>
            <a href="http://www.tumanyi.com/hz/" title="杭州装修网">杭州装修网</a>
            <a href="http://bbs.jia.com/hangzhou/" title="杭州装修论坛">杭州装修论坛</a>
            <a href="http://hz.zx123.cn" title="杭州装修">杭州装修</a>
            <a href="http://www.xiugei.com/xueyuan/" title="室内装修流程秀给网装修学院">室内装修流程</a>
            <a href="http://hz.zxzhijia.com" title="杭州装修网">杭州装修网</a>
            <a href="http://www.zrcw.net" title="汉中人网">汉中人网</a>
            <a href="http://www.dagannan.com" title="赣州生活门户网">赣州生活门户网</a>
            <a href="http://www.gzzxjlw.com/" title="广州啄木鸟装修监理广州啄木鸟装修监理">广州啄木鸟装修监理</a>
            <a href="http://zx.meilele.com/zhishi/" title="装修知识大全" style="border:0">装修知识大全</a>
        </div>
    </div>
    <!--公共底部 E-->


    <!-- 在线咨询 -->
    <div class="rightzx">
        <a class="rzxbox hover" href="http://wpa.qq.com/msgrd?v=3&uin=3137710059&site=qq&menu=yes">
            <i class="ls"></i>
            <p>在线咨询</p>
        </a>
        <a class="rzxbox" href="index-ZXyuyue.html">
            <i class="ls2"></i>
            <p>我要预约</p>
        </a>
        <a class="rzxbox b3">
            <i class="ls3"></i>
            <p>扫描二维码</p>
            <div class="rzxboxwx">
                <img src="image/xy2.png">
            </div>
        </a>
        <a class="rzxbox btn-top" href="#">
            <i class="ls4"></i>
            <p>返回顶部</p>
        </a>
    </div>

	<script type="text/javascript">
		var fieldArr = [{"type":"data-input","necessary":true,"title":"您的姓名","tips":"请输入您的姓名","init":""},{"type":"data-input","necessary":true,"title":"您的电话","tips":"请输入您的电话","init":""},{"type":"data-select","necessary":true,"title":"选择服务项目","tips":"选择服务项目","init":"aaa,bbb,ccc"},{"type":"data-checkbox","necessary":true,"title":"增值服务","tips":"选择服务项目","init":"量房服务,验房服务"},{"type":"data-address","necessary":true,"title":"填写地址","tips":"选择服务项目","init":"量房服务,验房服务"},{"type":"data-address","necessary":true,"title":"填写地址2","tips":"选择服务项目","init":"量房服务,验房服务"},{"type":"data-textarea","necessary":true,"title":"您的留言","tips":"选择服务项目","init":"量房服务,验房服务"}];
		
		renderField(fieldArr);
		function renderField(arr){
			var str = '';	
			var addressNum = 0;
			arr.forEach(function(item,index){
				var type = item.type;
				var initItems = item.init.split(',');
				switch (type){
					case 'data-input':
						//普通输入框
						str +=  '<li class="form-list normal-input">'+
		            				'<div class="form-tit"><span><i>*</i>'+item.title+' :</span></div>'+           				
		            				'<div class="form-con"><input class="input_text" type="text" placeholder="'+item.tips+'"  data-necessary="'+item.necessary+'"/></div>'+
		            			'</li>'
						break;
					case 'data-select':
						//下拉选择框
						str +=  '<li class="form-list select">'+
		            				'<div class="form-tit"><span><i>*</i>'+item.title+' :</span></div>'+         				
		            				'<div class="form-con">'+
		            					'<select name="case" class="input_text">'+
											'<option value="0">'+item.tips+'</option>'
						for(var i = 0;i < initItems.length;i++){
							str +=  '<option value="'+(i+1)+'">'+initItems[i]+'</option>'
						}
						str +=				'</select>'+
		            				'</div>'+
		            			'</li>'
						break;	
					case 'data-checkbox':
						//复选框
						str +=  '<li class="form-list checkbox">'+
		            				'<div class="form-tit"><span><i>*</i>'+item.title+' :</span></div>'+           				
		            				'<div class="form-con">'
		            	for(var i = 0;i < initItems.length;i++){
		            		if(i == 0){
		            			str +=  '<div class="checkbox-con">'+
											'<input type="checkbox" name="check-'+(i+1)+'" id="check-'+(i+1)+'-'+(i+1)+'" value="" checked="checked"/>'+
											'<label for="check-'+(i+1)+'-'+(i+1)+'">'+initItems[i]+'</label>'+
										'</div>'
		            		}else{
		            			str +=  '<div class="checkbox-con">'+
											'<input type="checkbox" name="check-'+(i+1)+'" id="check-'+(i+1)+'-'+(i+1)+'" value=""/>'+
											'<label for="check-'+(i+1)+'-'+(i+1)+'">'+initItems[i]+'</label>'+
										'</div>'
		            		}		            		
		            	}
		            	str +=		'</div>'+
		            			'</li>'
					break;
					case 'data-textarea':
						//多行输入框
						str +=  '<li class="form-list text-area">'+
		            				'<div class="form-tit"><span><i>*</i>'+item.title+' :</span></div>'+           				
		            				'<div class="form-con">'+
		            					'<textarea placeholder="" class="textarea" rows="6"></textarea>'+	
		            				'</div>'+
		            			'</li>'
					break;
					case 'data-address':
						//地址组件
						str +=  '<li class="form-list address">'+
		            				'<div class="form-tit"><span><i>*</i>'+item.title+' :</span></div>'+           				
		            				'<div class="form-con">'+
		            					'<div class="address-con">'+
											'<div id="distTarget'+addressNum+'" data-toggle="distpicker">'+
												'<select class="position province"  data-province="选择省"></select>'+
												'<select class="position city"  data-city="选择市"></select>'+
												'<select class="position area"  data-district="选择区"></select>'+
											'</div>'+
										'</div>'+
		            				'</div>'+
		            			'</li>'
						addressNum++;
					break;
				}
			})
			$('.enroll-info ul').html(str);
			for(var i = 0;i < addressNum;i++){
				$('#distTarget'+i).distpicker();
			}
		}
	</script>

</body>
</html>